<template>
	<view class="distribution_container">
		<view class="distribution_title_box">
			<view class="distribution_title_img">
				<image :src="titleImg" mode="widthFix" class="distribution_img"></image>
			</view>
			<view class="distribution_title">
				基本功能
			</view>
		</view>

		<view class="distribution_box">
			<!-- 1 -->
			<view class="bottom_box" v-for="items in bottomList" :key="items.id" @click="handlerBottom(items)">
				<!-- 左 -->
				<view class="bottom_title_box">
					<view class="bottom_title">
						{{ items.title }}
					</view>
					<view class="bottom_btn">
						{{ items.tip }}
					</view>
				</view>
				<view class="bottom_img_box">
					<image :src="items.img" mode="" class="bottom_img"></image>
				</view>
			</view>
		</view>

		<!-- 分销员招募 -->
		<u-popup v-model="showDistributors" mode="center" border-radius="12" :closeable="true" close-icon-color="#000">
			<view class="popup_distributor_box">
				<image :src="shareImg" mode="" class="popup_distributor_img"></image>
			</view>
			<view class="distributor_btn_box">
				<view class="distributor_btn_all" v-for="(item, index) in distributorBtnList" :key="index"
					@click="handleShare(item)">
					<view class="btn_img_box">
						<image :src="item.img" mode="" class="btn_img"></image>
					</view>
					<view class="btn_name">
						{{ item.name }}
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 客服弹窗 -->
		<u-popup v-model="showCustom" mode="center" border-radius="12" :closeable="true" close-icon-color="#000">
			<view class="popup_custom_box">
				<canvas style="width: 600rpx;height:800rpx;" canvas-id="code">
					<img :src="customObj" alt="" class="popup_custom_img" />
				</canvas>
				<!-- <image :src="customObj" mode="widthFix" class="popup_custom_img"></image> -->
			</view>
		</u-popup>

		<!-- 设置分销比例弹窗 -->
		<u-popup v-model="showProportion" mode="center" width="680" border-radius="12" :closeable="true"
			close-icon-color="#000" @close="handleCloseProportion">
			<view class="popup_proportion_box">
				<view class="proportion_top">
					设置分销比例
				</view>
				<view class="proportion_input_all">
					<u-input v-model="proportionValue" type="number" :border="true"
						:onkeyup="proportionValue = (proportionValue || '').replace(/[^A-z0-9]/, '')"
						placeholder="请输入分销比例(单位%)" />
					<!-- <input type="number"v-model="proportionValue" :onkeyup="proportionValue = (proportionValue || '').replace(/[^\d]/g, '')"
						placeholder="请输入分销比例(单位%)"> -->
				</view>
				<view class="">
					<u-button type="primary">确定</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 查看上级联系方式弹窗 -->
		<u-popup v-model="showPhoneNum" mode="center" border-radius="12">
			<view class="popup_phone_box">
				<view class="popup_wx_code">
					<canvas style="width: 100%;height:654rpx;" canvas-id="code">
						<img :src="userMsgObj.contact_qrcode" alt="" class="popup_wx_img" />
					</canvas>
					<!-- <image :src="userMsgObj.contact_qrcode" mode="widthFix" class="popup_wx_img"></image> -->
				</view>
				<view class=""
					style="display: flex; align-items: center; justify-content: space-between;padding: 30rpx 20rpx 0 0;">
					<view class="popup_phone_num">
						联系方式：{{userMsgObj.contact_number}}
					</view>
					<view class="">
						<u-button type="primary" size="mini"
							@click="handleCall(userMsgObj.contact_number)">拨打</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 登出提示 -->
		<u-modal v-model="showOut" :content="outContent" :show-cancel-button="true" @confirm="sureLoginOut"></u-modal>
	</view>
</template>

<script>
	export default {
		props: ['userInfo', 'isFollow'],
		data() {
			return {
				titleImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/6683708371466_1719890051.png',
				bottomList: [{
						id: '0',
						title: '我的分销',
						tip: '查看我的分销',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20a6ee11c_1726816422.png'
					}, {
						id: '1',
						title: '分销员招募',
						tip: '招募我的分销员',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1fdf46ae6_1726816223.png'
					},
					{
						id: '11',
						title: '电商带货',
						tip: '申请电商带货',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20c42c88e_1726816452.png'
					},
					{
						id: '2',
						title: '我的小店',
						tip: '自己的小店信息',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed202b317c9_1726816299.png'
					},
					{
						id: '12',
						title: '系统教程',
						tip: '系统使用教程',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed2049978df_1726816329.png'
					},
					// {
					// 	id: '3',
					// 	title: '联系客服',
					// 	tip: '为您答疑解惑',
					// 	img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20795848d_1726816377.png'
					// },
					// {
					// 	id: '4',
					// 	title: '上级联系方式',
					// 	tip: '查看上级联系方式',
					// 	img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed205e28185_1726816350.png'
					// },
					// {
					// 	id: '5',
					// 	title: '个人信息',
					// 	tip: '修改个人信息',
					// 	img: '/static/my/new/icon-change-avatar.png'
					// },
					// {
					// 	id: '4',
					// 	title: '商务合作',
					// 	tip: '查看商务合作',
					// 	img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66837001d9744_1719889921.png'
					// },
					{
						id: '6',
						title: '设置',
						tip: '查看设置',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1ffe9300f_1726816254.png'
					},
					{
						id: '7',
						title: '登出账号',
						tip: '登出当前账号',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20e07f285_1726816480.png'
					},

				],
				showOut: false,
				outContent: '是否确定登出当前账号',
				showDistributors: false,
				distributorBtnList: [{
					name: '保存本地',
					img: '/static/home/icon-save.png'
				}],
				shareImg: 'https://saler.jkcae.com/poster/package_poster/poster_package_7_270_12168.png',
				showCustom: false,
				customObj: {},
				showProportion: false,
				proportionValue: '',
				userInfoObjNew: {},
				showPhoneNum: false,
				userMsgObj: {},
				isFollowNew: ''
			}
		},
		watch: {
			userInfo: {
				handler(newVal) {
					this.userInfoObjNew = newVal
				},
				deep: true,
				immediate: true
			},

			isFollow: {
				handler(newVal) {
					this.isFollowNew = newVal
				}
			}
		},
		onShow() {

		},
		methods: {
			// 拨打电话
			handleCall(val) {
				uni.makePhoneCall({
					phoneNumber: val
				})
			},

			// 关闭设置分销比例弹窗
			handleCloseProportion() {
				this.proportionValue = ''
				this.showProportion = false
			},

			// 保存
			handleShare(val) {
				if (val.name == '保存本地') {
					// 获取要保存的图片URL或者Base64数据
					let imageUrl = this.shareImg; // 或者 let base64Data = 'data:image/jpeg;base64,...'

					// 创建一个隐藏的<a>标签元素
					const linkElement = document.createElement('a');
					linkElement.href = imageUrl || `data:${mimeType};base64,${base64Data}`;
					linkElement.download = 'image.jpg'; // 设置文件名

					// 模拟点击事件触发下载
					document.body.appendChild(linkElement);
					linkElement.click();
					document.body.removeChild(linkElement);
				}
			},

			// 获取联系方式
			getAgenContact() {
				this.$request('/api/getAgenContact', {}, 'GET').then(res => {
					if (res.code == 1) {
						if (res.data.contact_number == null && res.data.contact_qrcode == null) {
							uni.showToast({
								title: '上级未配置联系方式',
								icon: 'none'
							})
							return
						} else {
							this.userMsgObj = res.data
							this.showPhoneNum = true
						}
					} else {
						uni.showToast({
							title: '获取联系方式失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 登出接口
			loginOut() {
				this.$request('/api/adminLoginOut', {
					id: uni.getStorageSync('userInfo').id
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('h5-token')
						setTimeout(() => {
							// uni.navigateTo({
							// 	url: '/pages/login/login'
							// })
							location.href = 'https://saler.jkcae.com/h5/#/pages/login/login'
						}, 1200)
					} else {
						uni.showToast({
							title: res.msg ? res.msg : '网络出错，请重试',
							icon: 'none'
						})
						return
					}
				})
			},

			// 联系客服接口
			getKfurl() {
				this.$request('/api/getAgentKefuInfo', {}, 'GET').then(res => {
					if (res.code == 1) {
						if (res.data.kefu_type == 0) {
							uni.showToast({
								title: '暂无配置客服',
								icon: 'none'
							})
							return
						} else if (res.data.kefu_type == 1) {
							// let costomUrl =
							// 	'https://work.weixin.qq.com/kfid/kfc3390dbba80a4500f?enc_scene=ENC4uCgMjAHRwAq1v284NHBu9GeQauvoBsukRTgob9oVuCZ&scene_param=123'
							if (res.data.kefu_url == null) {
								uni.showToast({
									title: '暂无配置客服',
									icon: 'none'
								})
								return
							} else {
								location.href = res.data.kefu_url
							}
						} else if (res.data.kefu_type == 2) {
							if (res.data.kefu_image == null) {
								uni.showToast({
									title: '暂无配置客服',
									icon: 'none'
								})
								return
							} else {
								this.customObj = res.data.kefu_image
								this.showCustom = true
							}
						}
					} else {
						uni.showToast({
							title: '您没有合伙人客服',
							icon: 'none'
						})
						return
					}
				})
			},

			// 选择我的分销等
			handlerBottom(val) {
				if (val.title == '我的分销') {
					uni.navigateTo({
						url: '/pages/my/myDistribution/myDistribution'
					})
				} else if (val.title == '分销员招募') {
					this.$emit('distributorsRecruit', 'distributorsRecruit')
				} else if (val.title == '我的小店') {
					this.$emit('myStore', 'myStore')
				} else if (val.title == '联系客服') {
					this.getKfurl()
				} else if (val.title == '商务合作') {
					uni.navigateTo({
						url: '/pages/my/cooperation/cooperation'
					})
				} else if (val.title == '分销比例') {
					// 显示弹窗
					this.showProportion = true
				} else if (val.title == '上级联系方式') {
					this.getAgenContact()
				} else if (val.title == '个人信息') {
					uni.navigateTo({
						url: '/pages/my/personalData/personalData'
					})
				} else if (val.title == '登出账号') {
					this.showOut = true
				} else if (val.title == '设置') {
					uni.navigateTo({
						url: '/pages/my/setUpPage/setUpPage'
					})
				} else if (val.title == '电商带货') {
					uni.navigateTo({
						url: '/pages/my/douyinLive/douyinLive'
					})
				} else if (val.title == '系统教程') {
					uni.navigateTo({
						url: '/pages/my/systemTutorial/systemTutorial'
					})
				}
			},

			// 确定登出 
			sureLoginOut() {
				this.loginOut()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.distribution_container {

		.distribution_title_box {
			position: relative;
			margin: 0 16rpx;

			.distribution_title_img {
				width: 100%;

				.distribution_img {
					width: 100%;
					height: 100%;
				}
			}

			.distribution_title {
				position: absolute;
				top: 50%;
				left: 38rpx;
				transform: translateY(-50%);
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
			}
		}

		.distribution_box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background: #FFFFFF;
			box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
			border-radius: 12rpx;
			border: 1px solid #F6F6F6;
			margin: 33rpx 18rpx;
			padding: 0 24rpx 24rpx;

			.bottom_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 321rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 5rpx 0px rgba(210, 210, 210, 0.23);
				border-radius: 10rpx;
				border: 1px solid #F5F5F5;
				padding: 29rpx 19rpx 18rpx 26rpx;
				margin-bottom: 21rpx;

				.bottom_title_box {

					.bottom_title {
						font-size: 30rpx;
						font-weight: 500;
						color: #333;
						padding-bottom: 6rpx;
					}

					.bottom_btn {
						font-size: 22rpx;
						font-weight: 400;
						color: #999;
					}
				}

				.bottom_img_box {
					width: 74rpx;
					height: 74rpx;

					.bottom_img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.popup_distributor_box {
			width: 550rpx;
			height: 930rpx;

			.popup_distributor_img {
				width: 100%;
				height: 100%;
			}
		}

		.popup_custom_box {
			width: 100%;

			.popup_custom_img {
				width: 100%;
				height: 100%;
				object-fit: fill;
				-webkit-touch-callout: default;
			}
		}

		.popup_proportion_box {
			padding: 30rpx;

			.proportion_top {
				font-size: 30rpx;
				padding-bottom: 30rpx;
			}

			.proportion_input_all {
				margin-bottom: 30rpx;
			}

		}

		.popup_phone_box {
			width: 680rpx;
			padding: 20rpx 0;

			.popup_wx_code {

				.popup_wx_img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					-webkit-touch-callout: default;
				}
			}

			.popup_phone_num {
				font-size: 30rpx;
				padding: 0 60rpx 0 20rpx;
			}
		}

		.distributor_btn_box {
			padding: 15rpx 0;

			.distributor_btn_all {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.btn_img_box {
					width: 82rpx;
					height: 82rpx;

					.btn_img {
						width: 100%;
						height: 100%;
					}
				}

				.btn_name {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
</style>